<!--
 * @Author      : ZhouQiJun
 * @Date        : 2019-08-22 19:41:20
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-10-02 02:06:35
 * @Description : 首页
-->
<template>
  <view class="content" ref="root">
    <!-- #ifdef H5 -->
    <image class="logo" src="/static/logo.png"></image>
    <!-- #endif -->
    <view class="text-area">
      Hello
      <text class="title">{{ title }} {{ platform }}</text>
    </view>
    <view>datetime {{ datetime }}</view>
    <u-datetime-picker
      v-model="datetime"
      :show="showDatetimePicker"
      mode="datetime"
    ></u-datetime-picker>
    <u-button type="success" @click="showDatetimePicker = true">打开</u-button>
    <u-button type="primary" loadingText="加载中"></u-button>
    <view>
      <MyButton />
    </view>
    <view>
      <MousePosition />
      <button @click="onGotoAbout">跳转到 about</button>
      <button @click="onEmit">触发事件</button>
    </view>
  </view>
</template>

<script>
import { MyButton } from '@/components'

import { MousePosition } from './components'

export default {
  components: {
    MyButton,
    MousePosition,
  },
  data() {
    return {
      datetime: '',
      showDatetimePicker: false,
      title: 'Hello',
      device: null,
    }
  },
  computed: {
    platform: function () {
      return this.device.platform
    },
  },
  mounted() {
    console.log('onMounted', { content: this.$refs.root })
  },
  onReady() {
    console.log('page onReady', { content: this.$refs.root })
  },
  onLoad() {
    console.log('onLoad')
    this.device = uni.getSystemInfoSync()
    console.log({ device: this.device })
  },
  onUnload() {
    console.log('page onUnload', 'zqj')
  },
  beforeDestroy() {
    console.log('component beforeDestroy', 'zqj')
  },
  onShow() {
    console.log('onShow')
  },
  methods: {
    onGotoAbout() {
      uni.navigateTo({
        url: '/pages/about/About?a=123&b=hello',
        events: {
          someEvent: (data) => {
            console.log({ data }, 'zqj someEvent')
          },
        },
        success: (res) => {
          console.log('success', { res })
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
        },
      })
    },
    onEmit() {
      uni.$emit('hello-event', { age: Math.random() * 100, name: 'jack' })
    },
  },
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
